<template>
  <button @click="chageNum">点击改变数字</button>
  <h1>{{ num }}</h1>
  <div class="demo">我是子组件哈哈哈哈</div>
</template>

<script>
import { toRefs, ref } from 'vue'
export default {
  name: 'Child',
  props: {
    num: {
      type: Number,
      default() {
        return 0
      }
    }
  },
  setup(props, { emit }) {
    console.log(props)
    let myNum = ref(props.num)
    function chageNum() {
      emit('update:num', ++myNum.value)
    }
    return {
      ...toRefs(props),
      chageNum,
      myNum
    }
  }
}
</script>

<style lang="scss" scoped>
.demo {
  height: 500px;
  width: 100vw;
  background: blue;
}
</style>